<template>
	<div class="container" ref="refContainer">
		<div class="doc-content">
			<div class="title">
				计数器
			</div>
			<div class="sub-title quote">
			</div>
			
			<div class="example-title">引入方式（按需）</div>
			<code-view>
				<template slot="code-js">{{ jsCode1 }}</template>
			</code-view>
			
			<div class="example-title">基本用法</div>
			<code-view>
				<template slot="code-html">{{ htmlCode2 }}</template>
				<template slot="code-js">{{ jsCode2 }}</template>
			</code-view>
			
			<div class="example-title">限制范围</div>
			<code-view>
				<template slot="code-html">{{ htmlCode3 }}</template>
			</code-view>
			
			<div class="example-title">设置步长</div>
			<code-view>
				<template slot="code-html">{{ htmlCode4 }}</template>
			</code-view>
			
			<div class="example-title">禁用输入框</div>
			<code-view>
				<template slot="code-html">{{ htmlCode5 }}</template>
			</code-view>
			
			<div class="example-title">限制为整数</div>
			<div class="example-sub-title quote">
				在整数状态下，步长会自动向上取整，最小值为1
			</div>
			<code-view>
				<template slot="code-html">{{ htmlCode6 }}</template>
			</code-view>
			
			<div class="example-title">调整尺寸</div>
			<code-view>
				<template slot="code-html">{{ htmlCode7 }}</template>
			</code-view>
			
			<div class="example-title">&lt;gr-stepper&gt;属性</div>
			<gr-table :width="800" :tableData="propertiesExplain" textAlign="left">
				<template v-slot="{rowData}">
					<gr-table-column label="参数名称" width="90">
						{{rowData.attrName}}
					</gr-table-column>
					<gr-table-column label="参数说明" width="150">
						{{rowData.introduce}}
					</gr-table-column>
					<gr-table-column label="类型" width="70">
						{{rowData.type}}
					</gr-table-column>
					<gr-table-column label="可选值" width="70">
						{{rowData.optionValues}}
					</gr-table-column>
					<gr-table-column label="默认值" width="60">
						{{rowData.defaultValue}}
					</gr-table-column>
				</template>
			</gr-table>
			
			<div class="example-title">&lt;gr-stepper&gt;事件</div>
			<gr-table :width="800" :tableData="propertiesExplain2" textAlign="left">
				<template v-slot="{rowData}">
					<gr-table-column label="事件名称" width="100">
						{{rowData.attrName}}
					</gr-table-column>
					<gr-table-column label="事件说明" width="150">
						{{rowData.introduce}}
					</gr-table-column>
					<gr-table-column label="事件回调参数" width="120">
						{{rowData.param}}
					</gr-table-column>
				</template>
			</gr-table>
		</div>
		<div class="demo-view">
			<div ref="refCellPhone" class="cellphone">
				<iframe src="demo.html#/stepperdemo" frameborder="0" width="100%" height="100%"></iframe>
			</div>
		</div>
	</div>
</template>

<script>
	import Demo from '../components/Demo.vue'
	import CodeView from '../components/CodeView.vue'
	export default {
		components: {
			Demo, CodeView
		},
		data() {
			return {
				jsCode1: `import {Stepper} from 'gabriel-ui'
Vue.use(Stepper)`,
				htmlCode2: `<gr-stepper v-model="num1" />`,
				jsCode2: `export default {
	data() {
		return {
			num1: 10
		}
	}
}`,
				htmlCode3: `<gr-stepper v-model="num2" :min="1" :max="15" />`,
				htmlCode4: `<gr-stepper v-model="num3" :step="2"/>
<gr-stepper v-model="num4" :step="0.3"/>`,
				htmlCode5: `<gr-stepper v-model="num5" input-disabled />`,
				htmlCode6: `<gr-stepper v-model="num6" interger :step="0.1" />`,
				htmlCode7: `<gr-stepper v-model="num6" interger :step="0.1" input-width="80px" btn-size="50px" />`,
				htmlCode8: ``,
				htmlCode9: ``,
				propertiesExplain: [
					{
						attrName: 'v-model',
						introduce: `绑定的value值`,
						type: 'Number',
						optionValues: '----',
						defaultValue: '----'
					},
					{
						attrName: 'min',
						introduce: `允许的最小值`,
						type: 'Number',
						optionValues: '----',
						defaultValue: '0'
					},
					{
						attrName: 'max',
						introduce: `允许的最大值`,
						type: 'Number',
						optionValues: '----',
						defaultValue: '10000'
					},
					{
						attrName: 'step',
						introduce: `步长，可以是整数或小数，整数模式下，小数点自动向上取整`,
						type: 'Number',
						optionValues: '----',
						defaultValue: '1'
					},
					{
						attrName: 'integer',
						introduce: `是否限制为整数，当限制为整数时，步长以及输入框的value值都会被取整`,
						type: 'Boolean',
						optionValues: 'true / false',
						defaultValue: 'false'
					},
					{
						attrName: 'input-disabled',
						introduce: `是否禁用输入框`,
						type: 'Boolean',
						optionValues: 'true / false',
						defaultValue: 'false'
					},
					{
						attrName: 'input-width',
						introduce: `输入框宽度, 单位px或rem均可`,
						type: 'String',
						optionValues: '----',
						defaultValue: '40px'
					},
					{
						attrName: 'btn-size',
						introduce: `加减按钮的宽高, 单位px或rem均可`,
						type: 'String',
						optionValues: '----',
						defaultValue: '36px'
					}
				],
				propertiesExplain2: [
					{
						attrName: 'minus',
						introduce: `点击减少按钮触发的事件`,
						param: '输入框的value值'
					},
					{
						attrName: 'add',
						introduce: `点击增加按钮触发的事件`,
						param: '输入框的value值'
					}
				]
			}
		},
		mounted() {
			let ele = this.$refs.refCellPhone
			this.$refs.refContainer.addEventListener('scroll', (e)=> {
				ele.style.top = e.target.scrollTop + 'px';
			})
		},
		methods: {
			copy(value) {
				this.$util.copy(value)
				this.$toast.show('已复制')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.doc-content {
		width: 1000px;
		.icon-list {
			margin-top: 20px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.icon-view {
				width: 15%;
				padding: 2px;
				margin-top: 25px;
				-webkit-user-select: none;
				text-align: center;
				font-size: 14px;
				color: #666;
			}
		}
	}
</style>
